$btn-right:rgb(245, 245, 252);
$btn-left:rgb(248, 248, 248);
$btn-bgc:rgb(112, 143, 228);
$comment-color:rgb(117, 223, 250);

.comment-box {
    position: fixed;
    width: 200px;
    top: 25%;
    right: 0;
    padding: 20px;
    transform: translateX(80%);

    background-color: $comment-color;
    list-style: none;
    text-align: start;
    border-radius: 20px 0 0 20px;


    .comment-content {
        height: 40px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid rgb(186, 45, 214);

        margin: 10px;
        line-height: 40px;
        text-indent: 10px;

    }

    .btn-toggle {
        height: 100px;
        width: 40px;
        background-color: $btn-bgc;

        position: absolute;
        left: -40px;
        top: 50%;

        transform: translateY(-50%);
        border-radius: 10px 0 0 10px;

        cursor: pointer;

        .btn-toggle-icon {
            width: 35px;
            height: 35px;
            position: absolute;
            top: 50%;
            left: 85%;

            transform: translate(-50%, -50%) rotate(45deg);

            border-right: 4px solid transparent;
            border-top: 4px solid transparent;

            border-left: 4px solid $btn-left;
            border-bottom: 4px solid $btn-left;
        }

        .btn-toggle-icon.active {

            border-left: 4px solid transparent;
            border-bottom: 4px solid transparent;

            border-right: 4px solid $btn-right;
            border-top: 4px solid $btn-right;
            left: 15%;
        }
    }
    .comment-inpput{
        display: flex;
        padding: 20px 0px;
        justify-content: center;
        align-items: center;
        input{
            width: 70%;
            height: 40px;
            font-size: 18px;
            outline: none;
            border-radius: 5px;
            border: 1px solid #cccc;
            background-color: rgba(255, 255, 255, 0.945);
        }
        span{
            height: 40px;
            line-height: 40px;
            width: 30%;
            font-size: 30px;
            color: rgb(40, 12, 199);
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
        span:hover{
            font-size: 35px;
        }
    }
}
.comment-box:hover{
    opacity: 1 !important;
}
.fade-enter {
    transform: translate(0%, 0);
    opacity: .3;
}

.fade-enter-active {
    opacity: .3;
    transform: translate(80%, 0);
    transition: all .2s linear;
}

.fade-enter-done {
    opacity: .5;
    transform: translate(80%, 0);
}

.fade-exit {
    transform: translate(80%, 0);
    opacity: .5;
}

.fade-exit-active {
    opacity: .8;
    transform: translate(0%, 0);
    transition: all .2s linear;
}

.fade-exit-done {
    opacity: 1;
    transform: translate(0%, 0);
}